<template>
	<view>
		<view class='main-page-header'>
			<view class="flex flex-row main-page-logo p-2">
				<view class="flex justify-center justify-items-center items-center main-text-color-base">
					<view class="iconfont iconfont-position icon-img-24"></view>
					富贵小区
				    <view class="iconfont iconfont-drop-down icon-img-14"></view></view>
			</view>
			<view class="flex flex-row main-page-search p-2">
				<u-search :placeholder="searchKeywordText" class="w-4/5	" actionText="搜索" @focus="$Router.push({path: '/pages/common/search/search'})" ></u-search>
			</view>
		</view>
		<view>
			<u-notice-bar :text="text1"></u-notice-bar>
		</view>
		<swiper class="swiper px-2" circular :indicator-dots="indicatorDots" :indicator-active-color="indicatorActiveColor" :indicator-color="indicatorColor"	 :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image src="../../../static/imgs/home/banner1.png" class="swiper-item"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../../static/imgs/home/banner2.png" class="swiper-item"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../../static/imgs/home/banner3.png" class="swiper-item"></image>
			</swiper-item>
		</swiper>
		<view class="px-2">
			<view class="white-bg flex flex-col p-2 mt-2 rounded-lg">
				<view class="flex flex-row justify-between justify-items-center	items-center content-center py-2">
					<view><view class="iconfont iconfont-high-quality icon-img-14"></view>优质好物</view>
					<view><view class="iconfont iconfont-natural icon-img-14"></view>天然健康</view>
					<view><view class="iconfont iconfont-security icon-img-14"></view>安全新鲜</view>
					<view><view class="iconfont iconfont-quality icon-img-14"></view>品质保障</view>
				</view>
				<view class="flex flex-row justify-between justify-items-center	items-center content-center py-2">
					<view class="flex flex-col justify-center justify-items-center	items-center">
						<image src="/static/imgs/home/district1.png" class="icon-img-50"></image>
						<view>水果蔬菜</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center	items-center">
						<image src="/static/imgs/home/district2.png" class="icon-img-50"></image>
						<view>肉禽蛋品</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center	items-center">
						<image src="/static/imgs/home/district3.png" class="icon-img-50"></image>
						<view>海鲜水产</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center	items-center">
						<image src="/static/imgs/home/district4.png" class="icon-img-50"></image>
						<view>速食冷冻</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center	items-center">
						<image src="/static/imgs/home/district5.png" class="icon-img-50"></image>
						<view>粮油米面</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-2">
			<view class="coupon-list">
				<view class="coupon rounded-lg flex flex-1 justify-items-center items-center">
					<view class="ml-3 font-size-base text-white	">￥5.00</view>
					<view class="font-size-sm p-6 text-white w-full flex flex-col justify-start justify-items-center items-center">
						<view>满69.00可用</view>
						<view>全类目可用</view>
					</view>
				</view>
				<view class="coupon rounded-lg flex flex-1 justify-items-center items-center">
					<view class="ml-3 font-size-base text-white	">￥5.00</view>
					<view class="font-size-sm p-6 text-white w-full flex flex-col justify-start justify-items-center items-center">
						<view>满69.00可用</view>
						<view>全类目可用</view>
					</view>
				</view>
				<view class="coupon rounded-lg flex flex-1 justify-items-center items-center">
					<view class="ml-3 font-size-base text-white	">￥5.00</view>
					<view class="font-size-sm p-6 text-white w-full flex flex-col justify-start justify-items-center items-center">
						<view>满69.00可用</view>
						<view>全类目可用</view>
					</view>
				</view>
				<view class="coupon rounded-lg flex flex-1 justify-items-center items-center">
					<view class="ml-3 font-size-base text-white	">￥5.00</view>
					<view class="font-size-sm p-6  w-full flex flex-col justify-start justify-items-center items-center">
						<view>满69.00可用</view>
						<view>全类目可用</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-2">
			<view class="seckill w-full h-full px-4 relative">
				<view class="bg-white seckill-good">
					<view class="flex flex-col p-2">
						<image src="/static/imgs/home/good1.png" class="icon-img-88"></image>
						<view>四川红心猕猴....</view>
						<view>￥50.01 ¥200</view>
						<view>仅剩99份</view>
					</view>
					<view class="flex flex-col p-2">
						<image src="/static/imgs/home/good1.png" class="icon-img-88"></image>
						<view>四川红心猕猴....</view>
						<view>￥50.01 ¥200</view>
						<view>仅剩99份</view>
					</view>
					<view class="flex flex-col p-2">
						<image src="/static/imgs/home/good1.png" class="icon-img-88"></image>
						<view>四川红心猕猴....</view>
						<view>￥50.01 ¥200</view>
						<view>仅剩99份</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-2">
			<view class="bg-white p-2">
				<view class="collage-head flex justify-between">
					<view>拼团</view>
					<view>></view>
				</view>
				<view class="collage-body relative">
					<view class="bg-white collage-good p-2">
						<view class="flex flex-col p-2">
							<image src="/static/imgs/home/good1.png" class="icon-img-88"></image>
							<view>四川红心猕猴....</view>
							<view>￥50.01 ¥200</view>
							<view>仅剩99份</view>
						</view>
						<view class="flex flex-col p-2">
							<image src="/static/imgs/home/good1.png" class="icon-img-88"></image>
							<view>四川红心猕猴....</view>
							<view>￥50.01 ¥200</view>
							<view>仅剩99份</view>
						</view>
						<view class="flex flex-col p-2">
							<image src="/static/imgs/home/good1.png" class="icon-img-88"></image>
							<view>四川红心猕猴....</view>
							<view>￥50.01 ¥200</view>
							<view>仅剩99份</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-center items-center"><image src="/static/imgs/home/tip-left.png" class="tip-img tip-img-left"></image>为你推荐<image src="/static/imgs/home/tip-right.png" class="tip-img tip-img-right"></image></view>
		<view class="p-2">
			<view class="sell-goods-list">
				<view class="sell-goods-item rounded-lg" v-for="item in goods">
					<image :src="item.logo"></image>
					<view class="price">
						<text>{{item.price}}</text>
						<text>￥2499</text>
					</view>
					<view class="name">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				searchKeywordText:'',
				positionText:'',
				background: ['color1', 'color2', 'color3'],
				indicatorColor: '#FFFFFF',
				indicatorActiveColor: '#8A38F5',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				goods:[{
					name:'商品一',
					price:'20.36',
					logo:'https://cdn.uviewui.com/uview/album/1.jpg'
				},
				{
					name:'商品二',
					price:'23.36',
					logo:'https://cdn.uviewui.com/uview/album/2.jpg'
				},
				{
					name:'商品三',
					price:'20.36',
					logo:'https://cdn.uviewui.com/uview/album/3.jpg'
				},
				{
					name:'商品四',
					price:'23.36',
					logo:'https://cdn.uviewui.com/uview/album/4.jpg'
				}
				]
			};
		},
		 methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style lang="scss">
.swiper{
	height: 360rpx;
}
.swiper-item{
	width: 100%;
	height: 360rpx;
}
.top-box{
	border-bottom: 2rpx solid #d9d9d9;
}
.main-page-header{
	background: $main-color-theme;
}
.main-page-search{
	//padding: 20rpx;
}
* {
    box-sizing: border-box;
}
.coupon-list{
	display: flex;
	overflow-x: auto;
	justify-content: space-between;
	//padding-bottom: 40rpx;
}
.coupon-list>view{
  flex-shrink: 0;
  margin-right: 10rpx;
  white-space: nowrap;
}
.coupon {
  width: 360rpx;
  height: 86rpx;
  background: $main-color-theme;
  -webkit-mask-image: radial-gradient(circle at 8px 50%, transparent 8px, red 8.5px);
  -webkit-mask-position: -8px;
  position: relative;
}
.coupon::before {
    content: '';
    height: 100%;
    border: 2rpx dashed #fff;
    position: absolute;
    left: 120rpx;
    top: 0;
    bottom: 0;
    margin: auto;
  }

// .coupon{
//     width: 360rpx;
//     height: 86rpx;
// 	position: relative;
// 	background: 
// 	  radial-gradient(circle at right top, transparent 10px,  #28A4F2 0) top left / 50px 51% no-repeat,
// 	  radial-gradient(circle at right bottom, transparent 10px,  #28A4F2 0) bottom left /50px 51% no-repeat,
// 	  radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /130px 51% no-repeat,
// 	  radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /130px 51% no-repeat;
// 	filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
// }
// .coupon::before {
//     content: '';
//     height: 20rpx;
//     border: 1px dashed #fff;
//     position: absolute;
//     left: 50px;
//     top: 0;
//     bottom: 0;
//     margin: auto;
//   }
.seckill{
	background: url('/static/imgs/home/seckill-bg.png') no-repeat;
	background-size:100% 100%;
	height: 620rpx;
}
.seckill-good{
	background: #ffffff;
	height: 340rpx;
	position: absolute;
	left: 20rpx;
	right: 20rpx;
	bottom: 70rpx;
	display: flex;
	overflow-x: auto;
	justify-content: space-between;
}
.seckill-good>view{
	//width: 300rpx;
	flex-shrink: 0;
	margin-right: 10rpx;
	white-space: nowrap;
}
.collage-good{
	background: #ffffff;
	height: 340rpx;
	//position: absolute;
	//left: 20rpx;
	//right: 20rpx;
	//bottom: 70rpx;
	display: flex;
	overflow-x: auto;
	justify-content: space-between;
}
.collage-good>view{
	//width: 300rpx;
	flex-shrink: 0;
	margin-right: 10rpx;
	white-space: nowrap;
}
</style>
